<template>
  <div class="query-shop-product">
    <div class="title">产品测试表</div>
    <div class="search">
      <el-select class="select-model" v-model="selectValue" placeholder="请选择">
        <el-option v-for="(item, i) in selectOption" :key="item.value" :label="item.label"
                   :value="item.value"></el-option>
      </el-select>
      <el-input class="key" v-model="keyWord" @keyup.enter="findData" placeholder="筛选关键词"></el-input>
      <el-button type="primary" icon="search" @click="query">搜索</el-button>
      <span class="text">查询结果条数：</span>
      <el-input-number class="el-count" v-model="pageCount" :min="100" :step="100"></el-input-number>
    </div>
    <div class="content">
      <el-table :data="data" v-loading="loading" style="width: 100%">
        <el-table-column prop="districtId" label="县编号">
        </el-table-column>
        <el-table-column prop="productType" label="产品类型">
        </el-table-column>
        <el-table-column prop="inregral" label="赠送积分">
        </el-table-column>
        <el-table-column prop="name" label="名称">
        </el-table-column>
        <el-table-column prop="info" label="说明">
        </el-table-column>
        <el-table-column prop="inputTime" label="选择日期">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template scope="scope">
            <el-button size="small" @click="show(scope.$index, scope.row)">查看</el-button>
            <el-button size="small" @click="edit(scope.$index, scope.row)">修改</el-button>
            <el-button size="small" type="danger" @click="deleteData(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination" v-if="hasPagination">
      <el-pagination :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" :current-page="currentPage"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    data () {
      return {
        loading: true,
        selectValue: '',
        selectOption: [
          {label: '县编号', value: 'districtId'},
          {label: '产品类型', value: 'productType'},
          {label: '赠送积分', value: 'inregral'},
          {label: '名称', value: 'name'},
          {label: '说明', value: 'info'}
        ],
        pageCount: 100,
        keyWord: '',
        pagesize: 10,
        currentPage: 1,
        start: 1,
        totalCount: 1000,
        tableContent: [],
        hasPagination: true
      }
    },
    created () {
      setTimeout(() => {
        this.getData()
      }, 20)
    },
    watch: {
      '$route' (to, from) {
        this.getData()
      }
    },
    computed: {
      data () {
        return this.tableContent
      }
    },
    methods: {
      // 获取数据
      getData () {
        if (this.$route.path === '/basic/productTest/query') {
          $.post('/basis/productTest.do?method=query', {param: JSON.stringify({})}).then((res) => {
            this.loading = false
            this.tableContent = res.maps
          })
        }
      },
      // 查询功能
      query () {
        $.post('/basis/productTest.do?method=query', {param: JSON.stringify({condition: `info like '%${this.keyWord}%'`})}).then((res) => {
          this.tableContent = res.maps
        })
      },
      // 进入编辑页，更新数据
      edit (index, row) {
        this.$router.push({name: 'update', params: {productTestId: row.productTestId}})
      },
      // 删除数据
      deleteData (index, row) {
        $.post('/basis/productTest.do?method=delete', {param: JSON.stringify({condition: 'productTestId= ' + row.productTestId})}).then((res) => {
          res.code === 0 ? alert('删除成功') : alert('好像哪里出错了')
          this.getData()
        })
      },
      // 进入展示页
      show (index, row) {
        this.$router.push({name: 'show', params: {productTestId: row.productTestId}})
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .query-shop-product
    position: relative
    margin: 20px auto 0
    border 1px solid rgba(0, 0, 0, .2)
    .title
      width: 100%
      line-height: 50px
      height: 50px
      text-indent: 20px
      background: #f3f5f7
      font-weight: 700
    .search
      padding 20px 0 0 20px
      .text
        margin-left 20px
      .select-model
        & > .el-input
          width 130px
      .key
        display inline-block
        width 200px
        margin 0 20px
    .content
      padding: 20px 0
      font-size: 14px
    .pagination
      text-align center
      padding-bottom 20px
</style>
